<template>
  <view>
    <view class="info">
      <view class="text">请支付报名费用共需</view>
      <view class="price">¥ {{price}}</view>
    </view>
    <view class="activity-item">
      <view class="pictrue">
        <image class="image" :src="picture"></image>
      </view>
      <view>
        <view class="activity-item-title">{{ title }}</view>
        <view class="activity-item-desc">￥{{ price }}</view>
      </view>
    </view>
	
	
	<view class="upload-item" @click="onUpload(1)">
		<view class="label">行程卡</view>
		<view class="preview">上传
			<image v-if="xck" class="image" :src="xck"></image>
		</view>
	</view>
	<view class="upload-item" @click="onUpload(2)">
		<view class="label">渝康码</view>
		<view class="preview">上传
			<image v-if="ykm" class="image" :src="ykm"></image>
		</view>
	</view>

    <button class="pay-btn" @click="onSubmit">微信支付</button>
  </view>
</template>

<script>
import {joinActivity, payActivity} from "@/api/2_activity";
import { uploadImageOne } from '@/utils/util.js';

export default {
  data() {
    return {
      id: '',
      title: '',
      price: '',
      picture: '',
	  
	  xck: '',//行程卡
	  ykm: '',//渝康码
    };
  },
  onLoad(options){
    this.id = options.id
    this.title = options.title
    this.price = options.price
    this.picture = options.picture
  },
  methods: {
	  onUpload(type){
			this.$util.uploadImageOne('upload/image', (res) => {
				if(res.status == 200){
					if(type == 1){
						this.xck = res.data.path
					}
					if(type == 2){
						this.ykm = res.data.path
					}
				}
			});
	  },
    onSubmit() {
		if(this.xck == '')
			return  this.$util.Tips({
			    title: '请上传行程卡',
			    icon: 'none'
			  });
		if(this.ykm == '')
			return  this.$util.Tips({
			    title: '请上传渝康码',
			    icon: 'none'
			  });
		
      joinActivity({
        id: this.id,
        pay_type: 2, //支付方式，1余额，2微信
        pay_money: this.price,
		xck: this.xck,
		ykm: this.ykm,
      }).then(res=>{
        console.log(res)
        payActivity({
          id: res.data.id,
        }).then(res2=>{
          console.log(res2)
		  
		  if(res2.data == '0元支付成功'){
			  this.$util.Tips({
			    title: '支付成功',
			    icon: 'success'
			  }, {
			    tab: 5,
			    url: '/pages/2_development/activity/result?type=success'
			  });
			  return
		  }
		  
          let config = res2.data.result.config
          uni.requestPayment({
            timeStamp: config.timestamp,
            nonceStr: config.nonceStr,
            package: config.package,
            signType: config.signType,
            paySign: config.paySign,
            success: (res) => {
              this.$util.Tips({
                title: '支付成功',
                icon: 'success'
              }, {
                tab: 5,
                url: '/pages/2_development/activity/result?type=success'
              });
            },
            fail: () => {
              return this.$util.Tips({
                title: '支付失败'
              }, {
                tab: 5,
                url: '/pages/2_development/activity/result?type=fail'
              });

            },
            complete: (res)  => {
              if (res.errMsg == 'requestPayment:cancel') return this.$util.Tips({
                title: '取消支付'
              });
            }
          })
        })
        // uni.navigateTo({
        //   url: '/pages/2_development/activity/result'
        // })
      }).catch((err)=>{
        uni.showToast({
          title: err,
          icon: 'none'
        })
      })
    }
  }
}
</script>

<style lang="scss">
.pay-btn {
  margin: 30rpx;
  height: 88rpx;
  line-height: 88rpx;
  font-size: 28rpx;
}

.info {
  background: #fff;
  text-align: center;
  padding: 30rpx 0;
  margin-bottom: 30rpx;

  .title {

  }

  .price {
    font-size: 60rpx;
    font-weight: bold;
  }
}

.activity-item {
  padding-left: 30rpx;
  padding-right: 30rpx;
  height: 180rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #fff;

  &:last-child {
    border-bottom: none;
  }

  .activity-item-title {
    font-size: 28rpx;
    color: #282828;
  }

  .activity-item-desc {
    font-size: 24rpx;
    color: #82848f;
    margin-top: 10rpx;
  }

  .pictrue {
    min-width: 130rpx;
    widows: 130rpx;
    height: 130rpx;
    margin-right: 30rpx;

    .image {
      width: 100%;
      height: 100%;
      border-radius: 6rpx;
      background: #eee;
    }
  }
}

.upload-item{
	margin: 10px 0;
	background: #fff;
	padding: 10px 15px;
	.label{
		line-height: 44px;
	}
	.preview{
		width: 88px;
		height: 88px;
		position: relative;
		background: #eee;
		border-radius: 10px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 14px;
		color: 999;
		.image{
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 2;
		}
	}
}
</style>
